<script setup>
import { imagesResourceParams, } from '@/stores/videoData.js';
import { useRouter, useRoute } from 'vue-router';
import { preloadImage, processBackEndData } from '@/utils/tool.js';
import VLoading from "@/components/VLoading.vue";

const route = useRoute()
const router = useRouter()
let loading = ref(true)
let tab = ref(0)
let showData = ref({})
let subject = ref(null)
let subjectNum = ref(null)
let bgImg = ref(null)
let totalVideoClass = ref(null)
let imgParams = reactive([])
let subjectTag = reactive({
  color: null,
  text: null,
  borderStyle: null
})

// 选项卡切换监听
const handleTabUpdate = ((val) => {
  showData.value = totalVideoClass.value[val].videoResource
})

// 用户选择视频点击事件
const choiceVideo = ((val) => {
  const videoData = showData.value.find(item => item.videoName === val)
  videoData.subjectBgImg = bgImg.value
  videoData.subjectTag = subjectTag.text
  router.push({ path: '/VideoDetail', query: { videoData: JSON.stringify(videoData) } })
})

onMounted(async () => {
  subject = route.query.subject
  subjectNum.value = parseInt(subject)

  // 专业视频加载部分
  switch (subjectNum.value) {
    case 0:
      totalVideoClass.value = await processBackEndData('hanyuyan');

      /** ↓ 人情世故代码 ↓ */
      const targetChapter = totalVideoClass.value.find(item => item.chapterName === '汉魏六朝诗与魏晋风流');
      if (targetChapter) {
        const index = totalVideoClass.value.indexOf(targetChapter);
        totalVideoClass.value.splice(index, 1);
        totalVideoClass.value.unshift(targetChapter);
      }
      /** ↑ 人情世故代码 ↑ */

      subjectTag = {
        color: '#e54d42',
        text: '汉',
        borderStyle: '1px solid #e54d42'
      }
      handleTabUpdate(0)
      break;
    case 1:
      totalVideoClass.value = await processBackEndData('xinwen')
      subjectTag = {
        color: '#39b54a',
        text: '新',
        borderStyle: '1px solid #39b54a'
      }
      handleTabUpdate(0)
      break;
    case 2:
      break;

  }

  // 背景图和插画加载部分
  bgImg.value = imagesResourceParams[subjectNum.value].bgImg
  imgParams = imagesResourceParams[subjectNum.value].imgParams
  // 组件挂载后预加载图片
  imgParams.forEach(item => {
    preloadImage(item.url)
  })
  await nextTick()

  loading.value = false
});
</script>


<template>

  <template v-if="loading">
    <VLoading :isLoading=loading />
  </template>

  <template v-else>

    <body :style="{ backgroundImage: 'url(' + bgImg + ')' }">
      <!-- 动态插画 -->
      <template v-for="(item, index) in imgParams" :key="index">
        <img :src="item.url" :class="[item.imgStyle, 'animate__animated']">
      </template>

      <!-------------------- 汉语言和新闻部分 ----------------->

      <template v-if="subjectNum < 2">
        <v-tabs v-model="tab" class="customTab" color="#1e90ff" @update:modelValue="handleTabUpdate">

          <template v-for="item in totalVideoClass" :key="item.chapterName">
            <v-tab class="tab-text-ellipsis" :value="item.id">{{ item.chapterName }}</v-tab>
          </template>
        </v-tabs>

        <!------------------ 视频展示区域 --------------->
        <v-window v-model="tab">
          <v-window-item :value="tab">
            <div class="container">
              <div class="item" v-for="item in showData" :key="item.videoName" @click="choiceVideo(item.videoName)">
                <div class="content" :style="{ backgroundImage: 'url(' + item.img + ')' }">
                  <div class="content_foot">
                    <div class="time">10:00</div>
                  </div>
                </div>
                <div class="introduce">
                  {{ item.videoIntroduce }}
                </div>
                <div class="teacher">
                  <div :style="{ color: subjectTag.color, border: subjectTag.borderStyle }">{{ subjectTag.text }}</div>
                  <div>{{ item.teacher }} 2024-01-10</div>
                </div>
              </div>
            </div>
          </v-window-item>
        </v-window>
      </template>

      <!--------------- 无课程选择的网新部分 ------------->

      <template v-else>
        <h1>此专业暂无课程</h1>
      </template>
    </body>
  </template>

</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  // position: relative;
  background-size: cover;
  background-position: center;
  padding-top: 10vh;
  background-attachment: fixed;
}

.customTab {
  margin: 10px 40px -10px 40px;
}

.container {
  grid-area: videos;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 减小最小列宽以适应更多列 */
  grid-auto-rows: auto;
  /* 自动调整行高以保持16:9的比例 */
  grid-gap: 30px;
  /* 设置视频之间的间距为30px */
  padding: 40px;
  /* 减小内边距以腾出更多空间 */
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 从顶部开始排列内容 */
  /* align-items: center; */
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  height: 100%;
}

.item::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9的比例，计算方法为9/16*100% */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* 设置宽高比为16:9 */
  // background-color: aqua;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
}

.content_foot {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 0%;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.time {
  margin-left: 85%;
  font-size: 0.6rem;
  color: white;
}

.introduce {
  width: 90%;
  margin: 8px 0 0 5px;
  font-size: 0.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teacher {
  color: #727579;
  width: 100%;
  font-size: 0.7rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px 0 0 5px;
}

.teacher div:nth-child(1) {
  // color: #e54d42;
  border-radius: 5px;
  // border: 1px solid #e54d42;
  padding: 0 3px 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  margin-right: 2%;
}


/** -------------动态icon样式------------ */
.titleIcon {
  width: 50vw;
  height: 30vh;
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.starIcon {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -10%;
  right: 0;
}

.mountainIcon {
  width: 80%;
  height: 70%;
  background-position: center;
  background-size: cover;
  position: fixed;
  left: -20%;
  bottom: -10%;
  transform: translate(0%, 0%);
  animation-duration: 2s;
}

.planetIcon {
  width: 70%;
  height: 80%;
  background-position: left;
  background-size: cover;
  position: fixed;
  left: -20%;
  bottom: 0%;
  transform: translate(0%, 0%);
  animation-duration: 2s;
}

.xinwen1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.xinwen2 {
  width: 70%;
  height: 70%;
  position: fixed;
  bottom: 0;
  right: 1vw;
}

.xinwen3 {
  width: 100%;
  height: 100%;
  position: fixed;
}

.tab-text-ellipsis {
  white-space: nowrap;
  /* 确保文本在一行显示 */
  overflow: hidden;
  /* 隐藏溢出的文本 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  max-width: 200px;
  /* 根据需要调整最大宽度 */
}

.v-tab {
  margin-right: 20px;
  /* 右侧间距 */
}
</style>